<template>
  <ul>
      <li>
          <div class="img-container pic-container">
              <img src="../../../static/img/banner.png" alt="">
          </div>
          <div class="info">
              <h4>医生名称</h4>
              <span>主治医生</span>
              <div>
                  <router-link target='_blank' class="orange-bg" to=''>眼部</router-link>
              </div>
              <p>预约 123 | 案例 33</p>
          </div>
      </li>

  </ul>
</template>
<script>
    export default{
        props:{
            width:{
                // default:
            }
        }
    }
</script>
<style lang="less" scoped>
   ul{
       overflow: hidden;
       li{
           float: left;
           width: 546px;
           margin-right: 40px;
           margin-bottom: 40px;
           >div{
            float: left;
           }
           .pic-container{
               width: 150px;
               height: 150px;
               margin-right: 20px;
           }
           .info{
               position: relative;
               width: 370px;
               min-height: 150px;
               padding-bottom: 30px;
               h4{
                   font-size: 18px;
               }
               span{
                   line-height: 26px;
               }
                a{
                    line-height: 30px;
                    margin-right: 10px;
                }
                p{
                    position: absolute;
                    bottom: 5px;
                    left: 0;
                    line-height: 26px;
                    max-height: 52px;
                    overflow: hidden;
                }
           }
       }
   }
</style>

